import Base from "../base.js";
import CinemasApi from '../../api/cinemas.js'
// 声明一个显示影院列表的类
const cinemasProps = [{
    name: "影院名称",
    key: "name"
}, {
    name: "影院是否营业",
    key: "status"
}, {
    name: "价格",
    key: "price"
}, {
    name: "距离",
    key: "distance"
}, {
    name: "影院地址",
    key: "address"
}]
export default class extends Base {
    data = {
        curPage: 1,
        eachPage: 5,
        total: 0,
        maxPage: 0,
        rows: [],
        selIfo: []
    }
    // 渲染基础数据
    render() {
        this.$el.html(`
            <div>
                <div style="margin-top:2px;">
                    <a href="/#/info/cinemas" style="font-size:16px;">影院信息</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                </div>
                <hr>
                <h1 style="margin:20px 40px;">影院页面</h1>
            </div>
            <div style="font-size:16px;margin:5px 0px;position:absolute;right:250px;top:64px;">
                选择查询类型： <select name="selectOption" id="selectOption" style="width:130px; padding:4px;margin-left:10px"></select>
                <input typr="text" id="selectvalue" style="padding:4px;"></input>
                <button id="selBtn" class="layui-btn layui-btn-sm" style="margin-bottom:2px;">查询</button>        
            </div>
            <table border="1" class="stuTable layui-table">
                 <thead>
                   <tr >
                      <th style="text-align:center;">影院名称</th>
                      <th style="text-align:center;">影院地址</th>
                      <th style="text-align:center;">联系电话</th>
                      <th style="text-align:center;">价格</th>
                      <th style="text-align:center;">距离</th>
                      <th style="text-align:center;">影院是否营业</th>
                      <th style="text-align:center;">相关电影海报</th>
                      <th style="text-align:center;">操作</th>
                   </tr>
                </thead>
                <tbody class="cinemas-list"></tbody>    
            </table>
            <section style="display:flex; ">
                <div class="layui-btn-container" style="margin-left:50px;">
                    <button type="button" class="layui-btn  layui-btn-sm first-btn">首页</button>
                    <button type="button" class="layui-btn  layui-btn-sm prev-btn">上一页</button>
                    <button type="button" class="layui-btn  layui-btn-sm next-btn">下一页</button>
                    <button type="button" class="layui-btn  layui-btn-sm last-btn">尾页</button>
                </div>

                <div style="margin-left:20px;color:gray;">
                    当前页：<select class="curPage" style="padding:4px;border:1px solid #d2d2d2;"></select>
                    每页显示条数：<input type="text" name="eachPage" value="${this.data.eachPage}" style="width:30px; height:20px;border:1px solid #d2d2d2; text-align:center;line-height:20px;">
                    总条数：<span class="total"></span>
                </div>
            </section>
        `)
        // 获取查找的下拉列表select,
        this.$selectOption = $("#selectOption");
        // 获取查找功能用户的输入,
        this.$selectValueEle = $("#selectvalue");
        // 确认查询按钮
        this.$selBtn = $("#selBtn")
        //获取功能按钮和当前页，总页
        this.$cinemasList = $(".cinemas-list");
        // 获取分页功能事件对象
        this.$curPageEle = $(".curPage");
        this.$eachPageEle = $("input[name=eachPage]");
        this.$totalEle = $(".total");
        this.$tableEle = $('table');
        this.$addBtnEle = $('.add');
        // 获取分页功能按钮
        this.$firstBtnEle = $(".first-btn");
        this.$prevBtnEle = $(".prev-btn");
        this.$nextBtnEle = $(".next-btn");
        this.$lastBtnEle = $(".last-btn");

        // 将cinemasProps的值遍历，
        let str = cinemasProps.map(item => {
            return `<option value=${item.key}>${item.name}</option>`
        })
        // 渲染查询初始页面
        this.$selectOption.html(`<option value="allInfo">显示全部</option>${str}`)
    }
    // 渲染动态数据
    rerender(data) {
        //this.data.rows拿到整个显示的数据 
        const str = data.map((item) => {
            return `
                <tr style="text-align:center;">
                    <td style="width:160px;">${item.name}</td>
                    <td>${item.address}</td>
                    <td>${item.phone}</td>
                    <td>${item.price}</td>
                    <td>${item.distance}</td>
                    <td>${item.status}</td>
                    <td><img src=/resource/${item.imgs[0]} style="width:30px;height:40px;"></td>
                    <td style="width:200px;">
                        <button type="button" class="layui-btn layui-btn-sm" data-index ="${item._id}" id="update">更新</button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" data-index ="${item._id}" id="remove">删除</button>
                        <button type="button" class="layui-btn layui-btn-sm" data-index ="${item._id}" id="filmPoster">查看海报</button>
                    </td>
                </tr>`
        }).join("");
        // 用html（）方法将str中的内容渲染到页面
        this.$cinemasList.html(str);
        this.$totalEle.html(this.data.total);
        // 创建一个空的options
        let options = "";
        //获取页数
        for (let i = 1; i <= this.data.maxPage; i++) {
            options += `<option value="${i}">${i}</option>`;
        }
        // 获取到当前页到值
        this.$curPageEle.html(options).val(this.data.curPage);
    }

    async getCinemas() {
        const { curPage, eachPage } = this.data;
        // 调用远程方法 获取数据，需要两个参数，当前页curPage和一页的总数eachPage
        const data = await CinemasApi.get({ curPage, eachPage });

        // 合并  把data里的内容筛选到this.data里
        Object.assign(this.data, data)
        // 直接调用 再次渲染页面内容
        this.rerender(this.data.rows);

    };

    // 渲染完成之后执行
    mounted() {
        this.getCinemas();
    };

    // 首页按钮事件
    first() {
        // 判断是否是在第一页，如果是，则不进行操作，如果不是，则跳转到第一页
        if (this.data.curPage === 1) return;
        this.data.curPage = 1;
        //重新渲染
        this.getCinemas();
    };

    // 尾页按钮事件
    last() {
        // 判断是否在最后一页，如果是最后一页，则不进行操作，如果不是则跳转到最大页maxPage
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.maxPage;
        this.getCinemas();
    };

    // 上一页按钮事件
    prev() {
        //判断当前页是否是第一页，如果是，则不进行操作，如果不是，则当前页减1
        if (this.data.curPage === 1) return;
        this.data.curPage = this.data.curPage - 1;
        this.getCinemas();
    };

    // 下一页按钮事件
    next() {
        // 判断当前页是不是最大页，如果是，则不进行操作，如果不是，则当前页加1
        if (this.data.curPage === this.data.maxPage) return;
        this.data.curPage = this.data.curPage + 1;
        this.getCinemas();
    };

    //当前页显示条数失焦事件
    setEachPageHandle(e) {
        // e.target.value拿到节点的value值 隐式转换
        this.data.eachPage = ~~e.target.value;
        this.getCinemas();
    };

    // 当前页改变时，触发事件并渲染
    setCurPageHandle(e) {
        this.data.curPage = e.target.value;
        this.getCinemas();
    };

    // 操作栏事件
    async tableHandle(e) {
        let event = window.event || e;
        if (event.target.id === 'update') {
            // 获取触发节点的id
            const id = $(event.target).attr("data-index");
            // 通过id获取该id下的完整影院信息数据
            const temp = this.data.rows.filter(item => item._id == id);
            // 将需要修改的影院数据存到本地，并跳转到修改影院页面
            sessionStorage.setItem("changeData", JSON.stringify(temp));
            location.hash = `#/info/update-cinema`;

        } else if (event.target.id === 'remove') {
            // 拿到用户的选择，赋值给option
            const option = window.confirm('确定删除吗');
            // 当用户点击确定，下面的if才会执行
            if (option) {
                // 获取到删除得id
                const _id = $(e.target).attr('data-index');

                // 将获取到的id值传给
                const data = await CinemasApi.remove({
                    _id
                });
          
                // 调用 getStudents  方法并提示删除成功
                this.getCinemas();
                layer.msg(`删除成功`, { icon: 1 });
            }
        } else if (event.target.id === 'filmPoster') {
            const id = $(event.target).attr("data-index");
            // 通过id获取该id下的完整影院信息数据
            const temp = this.data.rows.filter(item => item._id == id);
            // 将需要修改的影院数据存到本地，并跳转到修改影院页面
            sessionStorage.setItem("changeData", JSON.stringify(temp));
            // 将点击修改的影院id作为参数附带在路径后面，并跳转到上传海报页面
            location.hash = `#/info/upload-imgs/${event.target.dataset.index}`;
        }
    };
    changeSelectOption() {
        // 判断用户是不是选择的全部信息,是的话就渲染全部信息
        let option = this.$selectOption.val()
        if (option == "allInfo") {
            this.rerender(this.data.rows)
        }
    }

    // 拿到前置选项的value作为查询条件
    async select() {
        let option = this.$selectOption.val()
        // 判断用户是不是选择的全部信息
        if (option == "allInfo") {
            this.rerender(this.data.rows)
        } else {
            let data = {}
            data[option] = { $regex: `${this.$selectValueEle.val()}`, $options: `i` }
            this.data.selIfo = await CinemasApi.select(data)
            if (this.data.selIfo.length) {
                this.rerender(this.data.selIfo)
            } else {
                layer.msg("未查到相关信息", { icon: 2 })
            }
        }
    }

    // 绑定事件
    handle() {
        // 首页 尾页
        this.$firstBtnEle.on("click", this.first.bind(this));
        this.$lastBtnEle.on("click", this.last.bind(this));
        // 上一页下一页
        this.$prevBtnEle.on("click", this.prev.bind(this));
        this.$nextBtnEle.on("click", this.next.bind(this));
        // 修改当前页 当失焦当时候
        this.$eachPageEle.on('blur', this.setEachPageHandle.bind(this));
        this.$curPageEle.on('change', this.setCurPageHandle.bind(this));
        // table栏添加事件代理
        this.$tableEle.on('click', this.tableHandle.bind(this));
        // 查询按钮单击事件
        this.$selBtn.on("click", this.select.bind(this));
        // 查询类型的改变事件
        this.$selectOption.on("change", this.changeSelectOption.bind(this));
    }
}